import React, { Component } from 'react';
import PropTypes from "prop-types";
import {
    Form,
    Select,
    Input
} from "antd";

const Item = Form.Item
const Option = Select.Option

// 添加分类的form组件
export default class AddForm extends Component {
    // ref 
    addRef = React.createRef();

    componentDidMount() {
        this.props.setAddForm(this.addRef);
    }


    static propTypes = {
        categorys: PropTypes.array.isRequired, // 一级分类的数组
        parentId: PropTypes.string.isRequired, // 父分类的ID
        setAddForm: PropTypes.func.isRequired, // 用来传递form对象的函数
    }

    render() {
        const {categorys, parentId} = this.props;
        return (
            <Form ref={ this.addRef }>
                <Item name="parentId" initialValue={parentId}>
                    <Select>
                        <Option key="0" value="0">一级分类</Option>
                        {
                            categorys.map(item => <Option key={item._id} value={item._id}>{item.name}</Option>)
                        }
                    </Select>
                </Item>

                <Item 
                name="categoryName"  
                rules={[
                    {
                        required: true,
                        message: "分类名称必须输入",
                    },
                ]} 
                >
                    <Input placeholder="请输入分类名称" />
                </Item>
            </Form>
        )
    }
}


